<template>
  <div :class="['input-user', { clearable: clearable && (name || (value && value.length)) }]">
    <slot v-if="multiple" name="multiple" :users="users" :instance="this" :show-picker="showPicker">
      <TagRender :tags="users" :enable="!inputDisabled" @add="showPicker" @close="remove" />
    </slot>
    <slot v-else :id="id" name="single" :user-name="name" :instance="this" :show-picker="showPicker">
      <ElInput
        :placeholder="inputDisabled ? '--' : placeholder"
        readonly
        :disabled="inputDisabled"
        suffix-icon="el-icon-s-custom"
        :value="name"
        @click.native="showPicker">
        <template v-if="(name || (value && value.length)) && clearable && !inputDisabled" #append>
          <i class="el-icon-error" title="清空" @click.stop="clear"></i>
        </template>
      </ElInput>
    </slot>
    <UserPicker
      :visible.sync="show"
      :disabled-ids="disabledIds"
      :node-id="nodeId"
      :pre-selected-users="users"
      :multiple="multiple"
      @confirm="confirm" />
  </div>
</template>

<script>
  export default {
    name: 'InputUser',
    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },
    props: {
      id: [Number, String],
      name: String,
      value: Array,
      clearable: Boolean,
      multiple: Boolean,
      disabled: Boolean,
      placeholder: {
        type: String,
        default: '请选择'
      },
      preSelected: {
        type: Boolean,
        default: true
      },
      nodeId: {
        type: [Number, String],
        default: -1
      },
      disabledIds: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        show: false,
        users: []
      }
    },
    computed: {
      inputDisabled() {
        return this.disabled || (this.elForm || {}).disabled
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(newVal) {
          if (this.preSelected) {
            this.users = [...(newVal || [])]
          }
        }
      }
    },
    methods: {
      showPicker() {
        if (!this.inputDisabled) {
          this.show = true
        }
      },
      remove(item, index) {
        this.users.splice(index, 1)
        this.$emit('input', this.users)
      },
      emitInput(users) {
        if (this.multiple) {
          this.$emit('input', users)
        } else {
          this.$emit('update:id', users[0]?.id)
          this.$emit('update:name', users[0]?.name)
          this.$emit('input', users)
        }
        if (users.length) {
          this.elFormItem?.clearValidate?.()
        }
      },
      confirm(users) {
        this.emitInput(users)
      },
      clear() {
        this.emitInput([])
      }
    }
  }
</script>

<style lang="scss">
  .input-user {
    &.clearable {
      .el-input-group__append {
        padding: 0 6px 0 0;
        color: #c0c4cc;
        background-color: #fff;
        border-left: none;
      }

      .el-input__inner {
        border-right: none;

        &:focus {
          + .el-input__suffix + .el-input-group__append {
            border-color: var(--color-primary);
          }
        }
      }

      .el-icon-error {
        cursor: pointer;
      }
    }

    .el-transfer-panel__filter {
      margin: 9px;
      overflow: hidden;

      .el-input__suffix {
        right: -20px;
      }
    }
  }

  .el-form-item.is-error {
    .el-input-group__append {
      border-color: var(--color-primary);
    }
  }
</style>
